<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="showfrom">添加</el-button>
    </div>
    <lists
      :mList="mList"
      :size="size"
      :total="total"
      @getcurpagelist="getcurpagelist"
      @updateManuser="updateManuser"
      @delMan="delMan"
    ></lists>
    <forms
      :obj="obj"
      @addmanUser="addmanUser"
      ref="curId"
      @canle="canle"
    ></forms>
  </div>
</template>

<script>
import lists from "./list.vue";
import forms from "./form.vue";
import { userList,userCount } from "../../request/api.js";
export default {
  components: {
    lists,
    forms,
  },
  methods: {
    showfrom() {
      this.obj.isshow = true;
    },
    getmPage() {
      //获取管理员列表信息
      userList({ size: this.size, page: this.page })
        .then((d) => {
          // console.log(d,8888888888);
          if (d.data.code == 200) {
            this.mList = d.data.list;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getcurpagelist(curpage) {
      //子组件传过来的页码值 重新调用管理员列表信息
      this.page = curpage;
      this.getmPage();
      this.getCount()
    },
    addmanUser() {
      //表单添加数据成功，重新渲染页面并关闭表单
      this.obj.isshow = false;
      this.getmPage();
      this.getCount()
    },
    updateManuser(uid) {
      //列表页点击修改，先把点击id穿过来，通过父组件给表单页面，通过ref调用表单页面方法
      this.obj.isshow = true;
      this.$refs.curId.getOneManUser(uid);
    },
    canle() {
      this.obj.isshow = false;
    },
    delMan() {
      this.getmPage();
      this.getCount()
    },
    getCount() {
      userCount()
        .then((d) => {
          //获取管理员总数
          if (d.data.code == 200) {
            this.total = d.data.list[0].total;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  data() {
    return {
      size: 2,
      page: 1,
      mList: [],
      obj: {
        isshow: false,
      },
      total:0,
    };
  },
  mounted() {
    this.getmPage();
    this.getCount()
  },
};
</script>

<style>
.btn{
    margin: 30px 0;
}
</style>